@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

.spell-list-entry-view
  .method-signature
    background-color: transparent
    border: 0
    font-size: 1.1em
    display: inline-block
    padding: 4px

.spell-list-entry-view.spell-tab
  $height: 87px
  $paddingTop: 10px
  $paddingBottom: 25px
  $childSize: $height - $paddingTop - $paddingBottom
  width: 100%
  height: $height
  padding: $paddingTop 25px $paddingBottom 25px
  white-space: nowrap
  position: relative
  background: transparent url(/images/level/code_editor_top_bar_wood_background.png)
  background-size: 100% 100%
  z-index: 2

  .hinge
    position: absolute
    top: 0
    background: transparent url(/images/level/code_editor_top_bar_hinge.png)
    width: 24px
    height: 20px
    background-size: contain

  .hinge-0
    left: 20%
  .hinge-1
    left: 40%
  .hinge-2
    left: 60%
  .hinge-3
    left: 80%

  &.read-only
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url(/images/level/code_editor_top_bar_wood_background.png)
    background-size: 100% 100%
    > *:not(.spell-tool-buttons)
      @include opacity(0.5)
  
  .thang-avatar-view
    width: $childSize - 10px
    margin: 5px 0.4vw
    display: inline-block
    float: left

  .btn.btn-small
    margin-top: 15px
    margin-right: 1.3vw
    font-size: 18px

    .glyphicon
      font-size: 16px
    
  .btn.btn-small.spell-list-button
    float: left
    margin-top: 5px

  .spell-tool-buttons
    position: absolute
    right: 0px
    top: 0px

  .reload-code
    float: right
    display: none

  .beautify-code
    float: right

  .fullscreen-code
    float: right
    &:not(.maximized)
      .glyphicon-resize-small
        display: none
    &.maximized
      .glyphicon-fullscreen
        display: none

  .thang-avatar-wrapper
    border-width: 0

  .method-name-area
    margin-left: 10px
    margin-top: 10px
    text-transform: uppercase
    display: inline-block
    font-family: $headings-font-family
    font-weight: bold

    .method-label
      font-size: 12px
      color: rgb(243, 211, 59)
      margin-bottom: -5px

    .method-signature
      color: white
      font-size: 18px
      padding: 0

.spell-list-entry-view:not(.spell-tab)
  cursor: pointer
  @include opacity(0.90)
  clear: both
  padding: 5px
  position: relative

  &:hover
    @include opacity(1)
    background-color: hsla(240, 40, 80, 0.25)

  &.shows-top-divider:not(:first-child)
    border-top: 1px dashed #ccc

  .method-signature
    margin-top: 5px

  .thang-names
    float: right
    margin: 8px
    font-variant: small-caps
    color: darken(#ca8, 50%)
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    font-size: 13px
    max-width: 35%
    text-align: right

  .thang-avatar-view
    width: 40px
    float: right

    .thang-avatar-wrapper
      margin: 0 5px 0 0
      //margin: 2px 10px 2px 5px


//html.no-borderimage 
//  .spell-list-entry-view.spell-tab  
//    border-width: 0
//    border-image: none
//    background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
//    background-size: 100% 100%
